/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<!--
 * @Author: zhb
 * @Date: 2020-08-28
 * @Description: 滑动窗口算子
 -->
<template>
    <div class="agg__form operate_form">
        <sf-form ref="form"
                 class="drawer-form__container"
                 :label-width="80">
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>时间字段</lang>
                </sf-fieldlabel>
                <sf-select v-model="formData.timeProperty"
                           :default-width="fieldWidth"
                           :allow-search="true"
                           :allow-blank="false"
                           :default-disabled="disabledStatus"
                           :options="timeFieldList" />
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>时间区间</lang>
                </sf-fieldlabel>
                <sf-datefield v-model="dateTime"
                              type="dateTimeRange"
                              :show-second="true"
                              :default-width="310"
                              :allow-blank="false"
                              :default-disabled="disabledStatus"
                              placeholder="请选择时间" />
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>时间窗口</lang>
                </sf-fieldlabel>
                <sf-numberfield v-model="formData.windowSize"
                                :default-width="112"
                                :allow-blank="false"
                                :allow-decimals="false"
                                :default-disabled="disabledStatus"
                                :placeholder="_('请输入整数')"
                                :min-value="1" />
                <sf-select v-model="formData.windowUnit"
                           :default-width="194"
                           :allow-search="true"
                           :allow-blank="false"
                           :default-disabled="disabledStatus"
                           :options="timeUnitList" />
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>滑动步长</lang>
                </sf-fieldlabel>
                <sf-numberfield v-model="formData.slide"
                                :default-width="112"
                                :allow-blank="false"
                                :allow-decimals="false"
                                :default-disabled="disabledStatus"
                                :placeholder="_('请输入整数')"
                                :min-value="1" />
                <sf-select v-model="formData.slideUnit"
                           :default-width="194"
                           :allow-search="true"
                           :allow-blank="false"
                           :default-disabled="disabledStatus"
                           :options="timeUnitList" />
            </sf-form-item>
            <common-agg-form
                ref="commonAgg"
                :list="fieldList"
                :agg-data="formData"
                :disabled="disabledStatus" />
            <div v-if="!disabledStatus && showOperateBtn"
                 class="add-operate__btn">
                <sf-button-primary
                    class="btn-primary m-r10"
                    @click.native="_submit">
                    <lang>确定</lang>
                </sf-button-primary>
                <sf-button @click.native="_cancel">
                    <lang>取消</lang>
                </sf-button>
            </div>
        </sf-form>
    </div>
</template>

<script lang=ts>
import { Vue, Component, Ref } from 'vue-property-decorator';
import { deepClone } from 'src/util/deep_clone';
import {
    TIME_AGG_DATA,
    TIME_UNIT_LIST
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';

import commonAggForm from 'src/home/mod_cluster/project_manager/feature_manager/output_form/common_agg_form.vue';

const ADD_DEFAULT_WIDTH = 310;
import moment from 'moment';
import { SfForm } from '@sxf/sf-vue-component';

@Component({
    name: 'TimeAggFrom',
    components:{
        commonAggForm
    }
})
export default class TimeAggForm extends Vue {
    @Ref() form!: SfForm


    formData = { ...TIME_AGG_DATA }
    dateTime = {
        start:'',
        end:''
    }
    timeUnitList = TIME_UNIT_LIST
    fieldWidth = ADD_DEFAULT_WIDTH
    defaultTime = ['00:00:00', '23:59:59']
    disabledStatus = false
    showOperateBtn = false
    fieldList = []
    timeFieldList = []


    reset () {
        this.formData = deepClone(TIME_AGG_DATA);
        this.clearInvalidMsg();
    }
    clearInvalidMsg () {
        this.$nextTick(() => {
            this.form.clearInvalid();
        });
    }
    getJsonValue () {
        if (!this.isValid()) {
            return this.$warn(this.form.getInvalidMsgs(), { autoHide: true });
        }
        this.formData.startDate = moment(this.dateTime.start).valueOf();
        this.formData.endDate = moment(this.dateTime.end).valueOf();
        // @ts-ignore
        this.formData.groupByKeys = JSON.stringify(this.formData.groupByKeys);
        // @ts-ignore
        this.formData.aggregationColumns = JSON.stringify(this.formData.aggregationColumns);
        // @ts-ignore
        this.formData.aggregationOps = JSON.stringify(this.formData.aggregationOps);
        return this.formData;
    }
    _submit () {
        if (!this.isValid()) {
            return this.$warn(this.form.getInvalidMsgs(), { autoHide: true });
        }
        // @ts-ignore
        let commonAggData = this.$refs.commonAgg.getJsonValue();
        Object.assign(this.formData, commonAggData);
        this.formData.startDate = moment(this.dateTime.start).valueOf();
        this.formData.endDate = moment(this.dateTime.end).valueOf();
        // @ts-ignore
        this.formData.groupByKeys = JSON.stringify(this.formData.groupByKeys);
        // @ts-ignore
        this.formData.aggregationColumns = JSON.stringify(this.formData.aggregationColumns);
        // @ts-ignore
        this.formData.aggregationOps = JSON.stringify(this.formData.aggregationOps);
        this.$emit('operate-submit', this.formData);
    }
    _cancel () {
        this.$emit('operate-cancel');
    }
    setFieldList (data) {
        this.fieldList = data;
        this.timeFieldList = data;
    }


    isValid () {
        return this.form.isValid();
    }

};
</script>

<style lang="less">
    .agg__form{
        .add-condition__date-picker {
            width: 310px;
            height: 30px;
            border-radius:0;
            &.allowblank-error {
                border: 1px solid #f55151;
            }
        }
        .sfv-fieldlabel{
            width: 86px !important;
        }

    }
</style>

